<template>
  <div>
    <div class="header">
      <div class="smallTitleBox bgOne">
        <svg-icon icon-class="newUser" />
        <div class="title">
          <div class="bigTitle">用户拉新</div>
          <div class="smallTitle">客户数 {{ headList[0] || 0 }}</div>
        </div>
      </div>
      <div class="smallTitleBox bgTwo">
        <svg-icon icon-class="suggest" class="diffStyle" />
        <div class="title">
          <div class="bigTitle">意向培训</div>
          <div class="smallTitle">客户数 {{ headList[1] || 0 }}</div>
        </div>
      </div>
      <div class="smallTitleBox bgTwo">
        <svg-icon icon-class="offer" class="diffStyle" />
        <div class="title">
          <div class="bigTitle">投保成交</div>
          <div class="smallTitle">客户数 {{ headList[2] || 0 }}</div>
        </div>
      </div>
      <!-- <div class="smallTitleBox bgTwo">
        <svg-icon
          icon-class="order"
          style="width: 60px; height: 60px; margin-right: 10px"
        ></svg-icon>
        <div class="title">
          <div class="bigTitle">客户裂变</div>
          <div class="smallTitle">客户数 139W</div>
        </div>
      </div> -->
      <div class="smallTitleBox bgTwo">
        <svg-icon icon-class="back" class="diffStyle" />
        <div class="title">
          <div class="bigTitle">流失召回</div>
          <div class="smallTitle">客户数 {{ headList[3] || 0 }}</div>
        </div>
      </div>
      <div>
        <div class="change">
          <el-button @click="changeTime('0')" :class="{ inSeleted: changeDate !== '0' }">当月</el-button>
          <el-button @click="changeTime('1')" :class="{ inSeleted: changeDate !== '1' }">当年</el-button>
        </div>
      </div>
    </div>
    <div class="commonBox">
      <div class="smallLine"></div>
      <div class="title">营销功能看板</div>
      <div class="abliteBox">
        <div class="smallAblite">
          <div class="smallTitle">
            <div class="topic">渠道活码</div>
            <el-button type="text" @click="$router.push({ name:'ChannelLiveCode' })">
              详情<i class="el-icon-arrow-right el-icon--right"></i>
            </el-button>
          </div>
          <div class="content" v-for="item in boardList[0].reqVo" :key="item.key">
            <div class="circle"></div>
            <div class="contentTitle">{{ item.key }}</div>
            <div class="contentNumb">{{ item.value }}</div>
          </div>
        </div>
        <div class="smallAblite">
          <div class="smallTitle">
            <div class="topic">群活码</div>
            <el-button type="text" @click="$router.push({ name:'LiveCode' })">
              详情<i class="el-icon-arrow-right el-icon--right"></i>
            </el-button>
          </div>
          <div class="content" v-for="item in boardList[1].reqVo" :key="item.key">
            <div class="circle"></div>
            <div class="contentTitle">{{ item.key }}</div>
            <div class="contentNumb">{{ item.value }}</div>
          </div>
        </div>
        <div class="smallAblite">
          <div class="smallTitle">
            <div class="topic">群发客户</div>
            <el-button type="text" @click="$router.push({ name:'DispatchCustomer' })">
              详情<i class="el-icon-arrow-right el-icon--right"></i>
            </el-button>
          </div>
          <div class="content" v-for="item in boardList[2].reqVo" :key="item.key">
            <div class="circle"></div>
            <div class="contentTitle">{{ item.key }}</div>
            <div class="contentNumb">{{ item.value }}</div>
          </div>
        </div>
        <!-- <div class="smallAblite">
          <div class="smallTitle">
            <div class="topic">群聊群发</div>
            <el-button type="text">
              详情<i class="el-icon-arrow-right el-icon--right"></i>
            </el-button>
          </div>
          <div class="content" v-for="item in boardList[3].reqVo">
            <div class="circle"></div>
            <div class="contentTitle">{{ item.key }}</div>
            <div class="contentNumb">{{ item.value }}</div>
          </div>
        </div> -->
        <div class="smallAblite">
          <div class="smallTitle">
            <div class="topic">个人SOP</div>
            <el-button type="text" @click="$router.push({ name:'PersonalSop' })">
              详情<i class="el-icon-arrow-right el-icon--right"></i>
            </el-button>
          </div>
          <div class="content" v-for="item in boardList[4].reqVo" :key="item.key">
            <div class="circle"></div>
            <div class="contentTitle">{{ item.key }}</div>
            <div class="contentNumb">{{ item.value }}</div>
          </div>
        </div>
        <div class="smallAblite">
          <div class="smallTitle">
            <div class="topic">群SOP</div>
            <el-button type="text" @click="$router.push({ name:'AllSop' })">
              详情<i class="el-icon-arrow-right el-icon--right"></i>
            </el-button>
          </div>
          <div class="content" v-for="item in boardList[5].reqVo" :key="item.key">
            <div class="circle"></div>
            <div class="contentTitle">{{ item.key }}</div>
            <div class="contentNumb">{{ item.value }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="commonBox">
      <div class="smallLine"></div>
      <div class="title">营销素材看板</div>
      <div class="sourceBox">
        <div class="smallSource">
          <div class="sourecHeader">
            <div class="sourceTitle">多媒体TOP</div>
            <div class="selete">
              <el-select
                @change="seleteChange(0)"
                v-model="materialForm[0].dateRange"
                clearable
                placeholder="请选择"
                style="margin-right: 12px"
              >
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
              <el-select
                @change="getMarketingHomepageMultiMedia"
                v-model="materialForm[0].materialType"
                clearable
                placeholder="请选择"
              >
                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </div>
          </div>
          <div>
            <!-- <div class="changeBox">
              <el-radio-group
                v-model="materialForm[0].type"
                @change="seleteChange(0)"
                fill="#FFF4ED"
                text-color="#082aff"
              >
                <el-radio-button label="0">PU</el-radio-button>
                <el-radio-button label="1">UV</el-radio-button>
                <el-radio-button label="2">浏览时长</el-radio-button>
                <el-radio-button label="3">发送总次数</el-radio-button>
              </el-radio-group>
            </div> -->
            <div class="sourceTable">
              <el-table
                :data="tableDataOfMedia"
                style="width: 100%"
                :row-style="{ height: '62px', border: 'none' }"
                :header-cell-style="{ background: '#ffffff' }"
                :cell-style="{ background: 'revert', border: 'none' }"
              >
                <el-table-column prop="grade" label="排名" align="center"></el-table-column>
                <el-table-column prop="title" label="多媒体名称" align="center"></el-table-column>
                <el-table-column prop="createBy" label="多媒体发布人" align="center"></el-table-column>
                <!-- <el-table-column prop="clickNum" label="点击量" align="center"></el-table-column> -->
                <el-table-column prop="pv" label="PV" align="center"></el-table-column>
                <el-table-column prop="uv" label="UV" align="center"></el-table-column>
                <el-table-column prop="submit" label="浏览时长" align="center"></el-table-column>
                <el-table-column prop="sendNum" label="发送总次数" align="center"></el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <div class="smallSource">
          <div class="sourecHeader">
            <div class="sourceTitle">文章TOP</div>
            <div class="selete">
              <el-select
                @change="seleteChange(1)"
                v-model="materialForm[1].dateRange"
                clearable
                placeholder="请选择"
                style="margin-right: 12px"
              >
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </div>
          </div>
          <div>
            <div class="sourceTable">
              <el-table
                :data="tableDataOfArticle"
                style="width: 100%"
                :row-style="{ height: '62px', border: 'none' }"
                :header-cell-style="{ background: '#ffffff' }"
                :cell-style="{ background: 'revert', border: 'none' }"
              >
                <el-table-column prop="grade" label="排名" align="center"></el-table-column>
                <el-table-column prop="title" label="文章名称" align="center"></el-table-column>
                <el-table-column prop="createBy" label="文章发布人" align="center"></el-table-column>
                <!-- <el-table-column prop="clickNum" label="点击量" align="center"></el-table-column> -->
                <el-table-column prop="pv" label="PV" align="center"></el-table-column>
                <el-table-column prop="uv" label="UV" align="center"></el-table-column>
                <el-table-column prop="submit" label="浏览时长" align="center"></el-table-column>
                <el-table-column prop="sendNum" label="发送总次数" align="center"></el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <div class="smallSource">
          <div class="sourecHeader">
            <div class="sourceTitle">问卷TOP</div>
            <div class="selete">
              <el-select
                @change="seleteChange(2)"
                v-model="materialForm[2].dateRange"
                clearable
                placeholder="请选择"
                style="margin-right: 12px"
              >
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </div>
          </div>
          <div>
            <div class="sourceTable">
              <el-table
                :data="tableDataOfForm"
                style="width: 100%"
                :row-style="{ height: '62px', border: 'none' }"
                :header-cell-style="{ background: '#ffffff' }"
                :cell-style="{ background: 'revert', border: 'none' }"
              >
                <el-table-column prop="grade" label="排名" align="center"></el-table-column>
                <el-table-column prop="title" label="问卷名称" align="center"></el-table-column>
                <el-table-column prop="createBy" label="问卷发布人" align="center"></el-table-column>
                <!-- <el-table-column prop="clickNum" label="点击量" align="center"></el-table-column> -->
                <el-table-column prop="pv" label="PV" align="center"></el-table-column>
                <el-table-column prop="uv" label="UV" align="center"></el-table-column>
                <el-table-column prop="submit" label="提交人数" align="center"></el-table-column>
                <el-table-column prop="sendNum" label="发送总次数" align="center"></el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <div class="smallSource">
          <div class="sourecHeader">
            <div class="sourceTitle">海报TOP</div>
            <div class="selete">
              <el-select
                @change="seleteChange(3)"
                v-model="materialForm[3].dateRange"
                clearable
                placeholder="请选择"
                style="margin-right: 12px"
              >
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </div>
          </div>
          <div>
            <div class="sourceTable">
              <el-table
                :data="tableDataOfPoster"
                style="width: 100%"
                :row-style="{ height: '62px', border: 'none' }"
                :header-cell-style="{ background: '#ffffff' }"
                :cell-style="{ background: 'revert', border: 'none' }"
              >
                <el-table-column prop="grade" label="排名" align="center"></el-table-column>
                <el-table-column prop="title" label="海报名称" align="center"></el-table-column>
                <el-table-column prop="createBy" label="海报发布人" align="center"></el-table-column>
                <!-- <el-table-column prop="clickNum" label="点击量" align="center"></el-table-column> -->
                <el-table-column prop="sendNum" label="发送总次数" align="center"></el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <div class="smallSource">
          <div class="sourecHeader">
            <div class="sourceTitle">险种TOP</div>
            <div class="selete">
              <el-select
                @change="seleteChange(4)"
                v-model="materialForm[4].dateRange"
                clearable
                placeholder="请选择"
                style="margin-right: 12px"
              >
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </div>
          </div>
          <div>
            <div class="sourceTable">
              <el-table
                :data="tableDataOfRisk"
                style="width: 100%"
                :row-style="{ height: '62px', border: 'none' }"
                :header-cell-style="{ background: '#ffffff' }"
                :cell-style="{ background: 'revert', border: 'none' }"
              >
                <el-table-column prop="grade" label="排名" align="center"></el-table-column>
                <el-table-column prop="title" label="险种名称" align="center"></el-table-column>
                <el-table-column prop="createBy" label="险种发布人" align="center"></el-table-column>
                <!-- <el-table-column prop="clickNum" label="点击量" align="center"></el-table-column> -->
                <el-table-column prop="sendNum" label="发送总次数" align="center"></el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <div class="smallSource">
          <div class="sourecHeader">
            <div class="sourceTitle">链接TOP</div>
            <div class="selete">
              <el-select
                @change="seleteChange(5)"
                v-model="materialForm[5].dateRange"
                clearable
                placeholder="请选择"
                style="margin-right: 12px"
              >
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </div>
          </div>
          <div>
            <div class="sourceTable">
              <el-table
                :data="tableDataOfLink"
                style="width: 100%"
                :row-style="{ height: '62px', border: 'none' }"
                :header-cell-style="{ background: '#ffffff' }"
                :cell-style="{ background: 'revert', border: 'none' }"
              >
                <el-table-column prop="grade" label="排名" align="center"></el-table-column>
                <el-table-column prop="title" label="链接名称" align="center"></el-table-column>
                <el-table-column prop="createBy" label="链接发布人" align="center"></el-table-column>
                <!-- <el-table-column prop="clickNum" label="点击量" align="center"></el-table-column> -->
                <el-table-column prop="pv" label="PV" align="center"></el-table-column>
                <el-table-column prop="uv" label="UV" align="center"></el-table-column>
                <el-table-column prop="sendNum" label="发送总次数" align="center"></el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SidebarItem from "@/layout/components/Sidebar/SidebarItem.vue";
import {
  getHeadList,
  getMarketingBord,
  getMarketingHomepageMultiMedia,
  getMarketingHomepageArticle,
  getMarketingHomepageForm,
  getMarketingHomepagePoster,
  getMarketingHomepageRisk,
  getMarketingHomepageLink,
} from "@/api/customerOperations";

export default {
  data() {
    return {
      radio1: "1",
      changeDate: "0", //当年当月切换
      options: [
        {
          value: "0",
          label: "今天",
        },
        {
          value: "1",
          label: "近七天",
        },
        {
          value: "2",
          label: "近一月",
        },
        {
          value: "3",
          label: "近半年",
        },
        {
          value: "4",
          label: "近一年",
        },
      ],
      options1: [
        {
          value: "0",
          label: "全部",
        },
        {
          value: "1",
          label: "图片",
        },
        {
          value: "2",
          label: "视频",
        },
      ],
      materialForm: [
        {
          materialType: "0",
          dateRange: "0",
        },
        {
          dateRange: "0",
        },
        {
          dateRange: "0",
        },
        {
          dateRange: "0",
        },
        {
          dateRange: "0",
        },
        {
          dateRange: "0",
        },
      ],
      tableDataOfMedia: [],
      tableDataOfArticle: [],
      tableDataOfForm: [],
      tableDataOfPoster: [],
      tableDataOfRisk: [],
      tableDataOfLink: [],
      value: "",
      headList: [],
      boardList: [
        {
          "reqVo": [
            {
              "key": "活码数量",
              "value": "0"
            },
            {
              "key": "已加好友数",
              "value": "0"
            }
          ]
        },
        {
          "reqVo": [
            {
              "key": "活码数量",
              "value": "0"
            },
            {
              "key": "已加好友数",
              "value": "0"
            }
          ]
        },
        {
          "reqVo": [
            {
              "key": "总执行账号数",
              "value": "0"
            },
            {
              "key": "群发条数",
              "value": "0"
            },
            {
              "key": "触达用户",
              "value": "0"
            }
          ]
        },
        {
          "reqVo": [
            {
              "key": "总执行账号数",
              "value": "0"
            },
            {
              "key": "群发条数",
              "value": "0"
            },
            {
              "key": "触达用户",
              "value": "0"
            }
          ]
        },
        {
          "reqVo": [
            {
              "key": "总执行账号数",
              "value": "0"
            },
            {
              "key": "生效规则",
              "value": "0"
            },
            {
              "key": "触达用户",
              "value": "0"
            }
          ]
        },
        {
          "reqVo": [
            {
              "key": "总执行账号数",
              "value": "0"
            },
            {
              "key": "生效规则",
              "value": "0"
            },
            {
              "key": "触达用户",
              "value": "0"
            }
          ]
        }
      ],
    };
  },
  methods: {
    changeTime(value) {
      if (value === this.changeDate) return;
      this.changeDate = value;
      this.getHeadList();
    },
    // 获取头部列表
    async getHeadList() {
      console.log(this.$store.state.user.userId);
      const res = await getHeadList({
        userId: this.$store.state.user.userId,
        time: this.changeDate,
      });
      if (res.code === 200) {
        this.headList = res.data;
      }
    },
    seleteChange(item) {
      if (item === 0) {
        this.getMarketingHomepageMultiMedia();
      } else if (item === 1) {
        this.getMarketingHomepageArticle();
      } else if (item === 2) {
        this.getMarketingHomepageForm();
      } else if (item === 3) {
        this.getMarketingHomepagePoster();
      } else if (item === 4) {
        this.getMarketingHomepageRisk();
      } else if (item === 5) {
        this.getMarketingHomepageLink();
      }
    },
    // 获取看板列表
    async getMarketingBord() {
      const res = await getMarketingBord({
        userId: this.$store.state.user.userId,
      });
      if (res.code === 200) {
        this.boardList = res.data;
      }
    },
    // 获取多媒体
    async getMarketingHomepageMultiMedia() {
      const res = await getMarketingHomepageMultiMedia(this.materialForm[0]);
      if (res.code === 200) {
        res.data.forEach((item,index)=>{
          item.grade=index+1
        })
        this.tableDataOfMedia = res.data;
      }
    },
    // 获取文章
    async getMarketingHomepageArticle() {
      const res = await getMarketingHomepageArticle(this.materialForm[1]);
      if (res.code === 200) {
        res.data.forEach((item,index)=>{
          item.grade=index+1
        })
        this.tableDataOfArticle = res.data;
      }
    },
    // 获取问卷
    async getMarketingHomepageForm() {
      const res = await getMarketingHomepageForm(this.materialForm[2]);
      if (res.code === 200) {
        res.data.forEach((item,index)=>{
          item.grade=index+1
        })
        this.tableDataOfForm = res.data;
      }
    },
    // 获取海报
    async getMarketingHomepagePoster() {
      const res = await getMarketingHomepagePoster(this.materialForm[3]);
      if (res.code === 200) {
        res.data.forEach((item,index)=>{
          item.grade=index+1
        })
        this.tableDataOfPoster = res.data;
      }
    },
    // 获取险种
    async getMarketingHomepageRisk() {
      const res = await getMarketingHomepageRisk(this.materialForm[4]);
      if (res.code === 200) {
        res.data.forEach((item,index)=>{
          item.grade=index+1
        })
        this.tableDataOfRisk = res.data;
      }
    }, // 获取链接
    async getMarketingHomepageLink() {
      const res = await getMarketingHomepageLink(this.materialForm[5]);
      if (res.code === 200) {
        res.data.forEach((item,index)=>{
          item.grade=index+1
        })
        this.tableDataOfLink = res.data;
      }
    },
  },
  components: { SidebarItem },
  created() {
    Promise.all([
      this.getHeadList(),
      this.getMarketingBord(),
      this.getMarketingHomepageMultiMedia(),
      this.getMarketingHomepageArticle(),
      this.getMarketingHomepageForm(),
      this.getMarketingHomepagePoster(),
      this.getMarketingHomepageRisk(),
      this.getMarketingHomepageLink(),
    ]);
  },
};
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 20px;
  .smallTitleBox {
    width: 228px;
    height: 102px;
    display: flex;
    align-items: center;
    .svg-icon {
      width: 61px;
      height: 62px;
    }
    .diffStyle {
      width: 47px;
      height: 47px;
      margin-right: 14px;
    }
    .bigTitle {
      font-size: 18px;
      font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
      font-weight: bold;
      color: #1d1d1d;
      margin-bottom: 8px;
    }
    .smallTitle {
      font-size: 14px;
      font-family: MicrosoftYaHei;
      color: #999999;
    }
  }
  .bgOne {
    flex: 1;
    background-image: url("../../../assets/image/arrorBg.png");
    background-repeat: no-repeat;
    padding-left: 12px;
    background-size: cover;
    background-size: 100% 100%;
  }
  .bgTwo {
    flex: 1;
    background-image: url("../../../assets/image/arrorBg1.png");
    background-repeat: no-repeat;
    padding-left: 26px;
    background-size: 100% 100%;
  }
  .change {
    margin-left: 17px;
    .el-button {
      margin: 10px 0;
      width: 73px;
      height: 34px;
      background: #ffffff;
      border-radius: 17px;
      display: block;
      border: none !important;
      font-size: 14px;
      font-family: MicrosoftYaHei;
    }
    .inSeleted {
      background: #eee;
      font-size: 14px;
      font-family: MicrosoftYaHei;
      color: #9e9e9e !important;
    }
  }
}

.commonBox {
  width: 100%;
  position: relative;
  margin-top: 20px;
  background: #ffffff;
  border-radius: 9px;
  padding: 18px 20px;
  .smallLine {
    position: absolute;
    left: 0;
    width: 3px;
    height: 16px;
    background: #082aff;
  }
  .title {
    font-size: 16px;
    font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
    font-weight: bold;
    color: #393b44;
    margin-bottom: 21px;
  }
}
.abliteBox {
  display: flex;
  .smallAblite {
    flex: 1;
    height: 330px;
    background: #f7f7f7;
    border-radius: 9px;
    padding: 14px 16px 17px;
    margin-right: 14px;
    box-sizing: border-box;
    .smallTitle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 19px;
      box-sizing: border-box;
      .topic {
        font-size: 14px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #393b44;
      }
      .el-button {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        padding: 0;
      }
    }
  }
  .smallAblite:last-child {
    margin-right: 0;
  }
  .content {
    position: relative;
    height: 100%;
    height: 77px;
    background: #ffffff;
    border-radius: 6px;
    padding: 16px 0 0 28px;
    margin-bottom: 14px;
    .circle {
      position: absolute;
      left: 12px;
      top: 20px;
      width: 6px;
      height: 6px;
      background: #082aff;
      border-radius: 50%;
    }
    .contentTitle {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      margin-bottom: 11px;
    }
    .contentNumb {
      font-size: 24px;
      font-family: Arial-BoldMT, Arial;
      font-weight: normal;
      color: #505050;
    }
  }
}

.sourceBox {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  .smallSource {
    width: 49%;
    height: 471px;
    border-radius: 10px;
    border: 1px solid #eeeeee;
    margin-bottom: 20px;
    padding: 13px 18px 0;
    .sourecHeader {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      .sourceTitle {
        font-size: 16px;
        font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
        font-weight: bold;
        color: #393b44;
      }
      .selete {
        ::v-deep .el-select {
          width: 90px;
          height: 32px;
          border-radius: 16px;
          .el-input--small .el-input__inner {
            width: 90px;
            height: 32px;
            border-radius: 16px !important;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
          }
        }
      }
    }
    .changeBox {
      margin: 10px 0 20px;
      .el-radio-group {
        border-radius: 10px;
        .el-radio-button {
          margin-right: 18px;
          ::v-deep .el-radio-button__inner {
            border: 1px solid #eeeeee;
            border-radius: 6px;
          }
        }
      }
    }
    .sourceTable {
      margin-left: -18px;
      margin-right: -18px;
      .el-table {
        border: none;
        height: 350px;
      }
    }
  }
  .smallSource:nth-child(2n-1){
    margin-right: 10px;
  }
  .smallSource:nth-child(2n){
    margin-left: 10px;
  }
}
//去掉表格内的线
::v-deep .el-table td {
  border-bottom: none !important;
}
//去掉最下面的那一条线
.el-table::before {
  height: 0px;
}
.customer-table .el-table__fixed-right::before,
.el-table__fixed::before {
  width: 0;
}
//去除表头的下标线；
::v-deep .el-table th.is-leaf {
  border-bottom: 2px solid #f4f4f4 !important;
}

::v-deep .el-table td.is-leaf {
  border-bottom: none !important;
}
</style>
